<script setup>
import {onMounted, ref, watch} from "vue";
import {getContentReq, searchFictionListReq} from "@/api/chapter.js";
import router from "@/router/router.js";
import {useRoute} from "vue-router";
import {ElLoading, ElMessage} from "element-plus";

//分页参数
const page = ref({
    pageNum: 1,
    pageSize: 14
});
const total = ref(0); //总条数
const loadingInstance = ref(null);//加载

const fictions = ref([]);

//从路径state中获取query
const route = useRoute();
const query = ref(route.query.query || '');

//获取搜索列表
const searchList = async () => {
    loadingInstance.value = ElLoading.service({ fullscreen: true, text: '加载中...' });

    try {
        if (query.value) {
            var result = await searchFictionListReq(page.value, query.value);

            const allData = result.data.data; // 获取所有数据
            total.value = result.data.total; // 总条数

            // 根据当前页码和每页大小截取数据
            const start = (page.value.pageNum - 1) * page.value.pageSize;
            const end = start + page.value.pageSize;
            fictions.value = allData.slice(start, end);
        } else {
            ElMessage.error('查询参数为空');
        }
    } catch (error) {
        console.error('请求失败:', error);
    } finally {
        loadingInstance.value.close();
    }

};

//获取小说详情，并导航到小说详情页面
const showInfo = (url) => {
    router.push({ path: `/webFictionInfo`, query: { titleUrl: url } });
};

//展示文章内容
const showContent = (url) => {
    router.push({ path: `/webShowFiction`, query: { url: url } });
}

//改变每页显示的数据
const handleSizeChange = (size) => {
    page.value.pageSize = size;
    searchList();
}
const handleCurrentChange = (num) => {
    page.value.pageNum = num;
    searchList();
}

onMounted(() => {
    searchList();
});
// 监听查询参数变化
watch(() => route.query.query, (newQuery) => {
    query.value = newQuery;
    searchList();
});
</script>

<template>
    <el-card class="card-container">
        <template #header>
            <div class="card-header">
                <span>搜索结果如下：</span>
            </div>
        </template>

        <el-table :data="fictions" stripe style="width: 100%">
            <el-table-column prop="title" label="小说标题">
                <template #default="scope">
                    <a href="javascript:void(0)" @click="() => showInfo(scope.row.titleUrl)">
                        {{ scope.row.title }}
                    </a>
                </template>
            </el-table-column>
            <el-table-column prop="author" label="作者" />
            <el-table-column prop="chapter" label="最新章节">
                <template #default="scope">
                    <a href="javascript:void(0)" @click="() => showContent(scope.row.chapterUrl)">
                        {{ scope.row.chapter }}
                    </a>
                </template>
            </el-table-column>
            <el-table-column prop="date" label="更新时间" />
        </el-table>

        <!-- 分页插件 -->
        <el-pagination
            v-model:current-page="page.pageNum"
            v-model:page-size="page.pageSize"
            :page-sizes="[10, 14, 20, 25]"
            layout="sizes, prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
    </el-card>
</template>

<style scoped>
.card-container{
  height: auto;
  box-sizing: border-box;
  min-height: 100vh;
}
</style>
